//跨组件通信演示
import React, { useState } from "react";
import { AppContext } from "./appContext";
import Header from "./header";
import Footer from "./footer";
const App: React.FC = () => {
  
  //准备状态
  const [isActive, setIsActive] = useState(false);

  //变更状态方法
  const toggleStyle = () => {
    setIsActive((prevIsActive) => !prevIsActive);
  };

  return (
    <>
      <AppContext.Provider value={{ toggleStyle, isActive }}>
        <Header />
        <Footer />
      </AppContext.Provider>
    </>
  );
};
export default App;
